<template>
  <section class="tools-lib-box">
    <nav class="left-menu" v-if="menuList.length">
      <el-menu
        :default-active="activeMenuIndex"
        :collapse="false"
        @select="handleToolsLibChange"
      >
        <el-menu-item
          v-for="item in menuList"
          :key="item.value"
          :index="item.value"
          >{{ item.title }}</el-menu-item
        >
      </el-menu>
    </nav>
    <div class="right-content">
      <keep-alive>
        <component
          :is="comName"
          :componentName="comName"
          :selectedRow="selectedRow"
          :configObj="configObj"
          :pageConf="pageConf"
        ></component>
      </keep-alive>
    </div>
  </section>
</template>

<script>
export default {
  name: 'ToolsLib',
  components: {
    PersonalInfo: () => import('./PersonalInfo.vue'),
    ServiceTrack: () => import('./ServiceTrack.vue')
  },
  props: {
    selectedRow: {
      type: Object,
      default: () => {}
    },
    configObj: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    selectedRow: {
      handler(val) {},
      deep: true,
      immediate: true
    },
    configObj: {
      handler(val) {
        let temp = [],
          index = 0;
        val.pageConf.forEach((item) => {
          temp.push({
            title: item.name,
            value: ++index + ''
          });
        });
        this.menuList = temp;
        this.pageConf = val.pageConf[0];
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      comName: 'PersonalInfo',
      activeMenuIndex: '1',
      menuList: [
        // { title: '个人档案', value: '1' },
        // { title: '服务跟踪情况', value: '2' }
      ],
      pageConf: {}
    };
  },
  methods: {
    handleToolsLibChange(val) {
      this.activeMenuIndex = val;
      switch (val) {
        case '1':
          this.comName = 'PersonalInfo';
          this.pageConf = this.configObj.pageConf[0];
          break;
        case '2':
          this.comName = 'ServiceTrack';
          this.pageConf = this.configObj.pageConf[1];
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tools-lib-box {
  width: 100%;
  display: flex;
  padding-top: 12px;
  .left-menu {
    flex-basis: 145px;
    background: #f0f2f5;
  }
  .right-content {
    flex-grow: 1;
    padding: 0 0px 17px 21px;
  }
}
::v-deep .el-menu {
  width: 145px;
  border-right: 0px;
  background: #f0f2f5;
}

::v-deep .el-menu-item {
  position: relative;
  padding-left: 26px !important;
  padding: 0;
  min-width: 145px;
  height: 41px;
  line-height: 41px;
  color: #8892a6;
  // overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}

::v-deep .el-menu-item.is-active {
  color: #fff;
  padding-left: 9px !important;
  margin-left: 12px;
  background: #7052ff;
  border-radius: 8px;
  min-width: 133px;
  font-weight: 400;
  &::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 41px;
    background: #7052ff;
    position: absolute;
    left: -12px;
    border-radius: 8px;
    z-index: 100;
  }
}

::v-deep .el-form-item__label {
  color: #636e95;
  font-size: 15px;
}
</style>
